<%@page import="org.springframework.web.bind.annotation.RequestMapping"%>
<%@ page language="java" contentType="text/html; charset=utf-8"
    pageEncoding="utf-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="../js/jquery-1.11.1.min.js"></script>
<link href="../js/bootstrap/css/bootstrap.min.css" rel="stylesheet">
<link href="../laypage/skin/laypage.css"  rel="stylesheet">
<!-- 可选的Bootstrap主题文件（一般不使用） -->
<script src="../js/bootstrap/css/bootstrap-theme.min.css"></script>
<link rel="stylesheet" type="text/css" href="../mycss/style.css" />
<!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->
<!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
<script type="text/javascript" src="../laypage/laypage.js"></script>
<script src="../js/bootstrap/js/bootstrap.min.js"></script>
<script type="text/javascript" src="../My97DatePicker/WdatePicker.js"></script>
<title>Insert title here</title>
</head>
<body id="tablePage">
 <div >	
		<blockquote>
			<p class="twoType">客户价值管理</p>
		</blockquote> 	
		<hr/>  

      <!-- Button trigger modal -->
<button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal2" onclick="showCusMes()">
  查看
</button>

<div class="modal fade" id="myModal2" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
        <h4 class="modal-title" id="myModalLabel">查看客户资源信息</h4>
      </div>
      <div class="modal-body">
 
       <table class="table">
       <tr><td>客户编码：<span id="cusId1"></span></td><td>客户姓名：<span id="cusName1"></span></td></tr>
       <tr><td>性别：<span id="cusSex1"></span></td><td>生日：<span id="cusBirth1"></span></td></tr>
       <tr><td> 类型：<span id="cusRank1"></span></td><td>状态：<span id="cusState1"></span></td></tr>
       <tr><td>手机：<span id="cusTel1"></span></td><td>办公电话：<span id="cusOfficePhone1"></span></td></tr>
       <tr><td>电子邮箱：<span id="cusMail1"></span></td><td>家庭电话：<span id="cusHomePhone1"></span></td></tr>
        <tr><td>消费次数：<span id="cusCount1"></span></td><td>消费金额：<span id="cusConsumptionAmount1"></span>（万元）</td></tr>
       <tr><td>联系地址：<span id="cusAddress1"></span></td></tr>
       <tr><td>备注信息：<span id="cusNote1"></span></td></tr>
       </table>

	    
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
        <!-- <button type="button" class="btn btn-primary">Save changes</button> -->
      </div>
    </div>
  </div> 
</div>


      
            <!-- Button trigger modal -->
<button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal3" onclick="updateCusMes()">
  更新客户消费信息
</button>

<div class="modal fade" id="myModal3" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
        <h4 class="modal-title" id="myModalLabel">查看客户资源信息</h4>
      </div>
      <div class="modal-body">
 
      <form action="" id="record">
       <table class="table">
       <tr><td>客户ID：<input id="cusId3" name="cusId"></input></td></tr>
       <tr><td>消费金额：<input id="money" name="money"></input></td></tr>
        <tr><td>消费时间：<input id="time" name="time"></input></td></tr>
       <tr><td>消费内容：<input id="content" name="content"></input></td></tr>
       <tr><td>备注信息：<input id="note" name="note"></input></td></tr>
       </table>
       
      </form>
        
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
        <input type="button" class="btn btn-default" onclick="updateCusMes000()" value="确定">
      </div>
    </div>
  </div> 
</div>
	 
	<div class="tableDiv">
		<form action="" >
		<table id="conTable" class="table table-bordered">
		  <thead>
			<tr class="info"><td></td><td></td><td>客户姓名</td><td>性别</td><td>客户类型</td><td>已消费次数</td><td>消费金额（单位：万元）</td><td>服务代表</td></tr>
		  </thead>
		  <tbody id="list">
		  
		  </tbody>
          <tfoot>
	         <tr><td id="page" colspan="8"></td></tr>
          </tfoot>
		</table>	
	</form>	
	</div>


</div>
	
</body>
<script type="text/javascript">
$(document).ready(function(){
  //1.加载表格中的信息
    loadComments(1);
  //页面加载事件
    function loadComments(curr) {
		  $.ajax({
			  url:'../customer',
			  type:'post',
			  data:{pageNum:curr},
			  dataType:'json',
			  success: function (result) {  
				  
				  var cusJSON=result.cusList;
			      //获取tbody标签 
				  var tcusMes = $('#list');
				  tcusMes.empty();
			      //遍历JSON元素，添加到到Tbody 
			       $.each(result.cusList,function(inx,ele){
		    	   $('#list').append('<tr><td>'+(inx+1)+'</td><td><input type="radio" name="radio" value="'+ele.cusId+'"/></td><td>' + ele.cusName + '</td>' +
		                  '<td>' + ele.cusSex + '</td>'+
		                  '<td>'+ele.cusRank+'</td>'+
		                  '<td>'+ele.cusCount+'</td>'+
		                  '<td>'+ele.cusConsumptionAmount+'</td>'+
		                  '<td>'+ele.cusInputPerson+'</td></tr>');   
		      })

			   	  	laypage({
						 cont:'page',//容器
					     pages:result.totalPages, //总页数
					     curr:curr||1,//当前页
					     skin:'molv',//皮肤
					     skip:true,//
					     last:'尾页',//
					     jump:function(obj,first){
					    	
					    	     if(!first){
					    	    	 loadComments(obj.curr);
					    	    	 }
					    	 }
					     
						})
			}
		  })
  }
})
/* 查看信息 */
      var showCusMes=function(){
	  var cusId=$("input[name='radio']:checked").val();
	  console.log(cusId);
	  if(cusId!=null){
	  $.ajax({
		  url:'../findCustomer',
		  type:'post',
		  data:{'cusId':cusId},
		  dataType:'json',
		  success:function(map){
			  var result=map.cusMes;
			  console.log(result.cusId);
			  $('#cusId1').html(result.cusId);
			  $('#cusName1').html(result.cusName);
			  $('#cusSex1').html(result.cusSex);
			  $('#cusBirth1').html(result.cusBirth);
			  $('#cusRank1').html(result.cusRank);
			  $('#cusState1').html(result.cusState);
			  $('#cusTel1').html(result.cusTel);
			  $('#cusOfficePhone1').html(result.cusOfficePhone);
			  $('#cusHomePhone1').html(result.cusHomePhone);
			  $('#cusMail1').html(result.cusMail1);
			  $('#cusAddress1').html(result.cusAddress);
			  $('#cusNote1').html(result.cusNote);
			  $('#cusCount1').html(result.cusCount);
			  $('#cusConsumptionAmount1').html(result.cusConsumptionAmount);
		
		  }
	  })
	  }else{
		  alert("请选择员工");
		  window.location.reload();	
	  }
	}
	
/* 修改消费信息 */
var updateCusMes=function(){
	var cusId=$("input[name='radio']:checked").val();
	$('#cusId3').val(cusId);
function updateCusMes000(){
 if(cusId!=null){
	$.ajax({
		  url:'../insertRecord',
		  type:'post',
		  data:$("#record").serialize(),
		  dataType:'json',
		  success:function(result){
	
			  alert(result.message);
			  window.location.reload();
		
		  }
	})
	}else{
		  alert("请选择员工");
		  window.location.reload();	
	} 
}
}

</script>
</html>